<template>
	<div class="main-wrapper">
		<router-view name="header" class="main-wrapper_header"></router-view>
		<router-view name="content" class="main-wrapper_content"></router-view>
		<router-view name="footer" class="main-wrapper_footer"></router-view>
		<iv-back-top class="main-wrapper_back" @on-click="backTopHandler"></iv-back-top>
	</div>
</template>

<script>
export default {
	data() {
		return {}
	},
	methods: {
		backTopHandler() {
			this.$vuex('common.navShow', true)
		}
	}
}
</script>

<style lang="scss">
.main-wrapper {
	background-color: $default-background-color;
	width: 100%;
	margin: 0 auto;
	
	&_header {
	}
	
	&_content {
		overflow: hidden;
	}
	
	&_footer {
		border: 1px solid yellow;
	}
	
	&_back {
		>div {
			background-color: $default-border-hover-color;
			@media screen and (max-width: $responsive-lg) {
				border-radius: 50%;
			}
			&:hover {
				@include btn_active
			}
			
			>i {
				padding: px2rem(1px);
			}
		}
	}
}
</style>
